.yearNavigatorWrapper, .yearNavigator {
  display: flex;
  align-items: center;
}

.yearNavigatorWrapper {
  position: relative;
  justify-content: center;
}

.yearNavigator {
  gap: 1rem;
}

.bigYearLabel {
  font-size: 5rem;
  margin: 0;
}

.arrowButton{
  cursor: pointer;
}

.arrowButton:hover{
  cursor: pointer;
  transition: transform 0.5s;
  transform: scale(1.15);
  -webkit-transform: scale(1.15);
  -moz-transform: scale(1.15);
  -ms-transform: scale(1.15);
  -o-transform: scale(1.15);
  -webkit-transition: transform 0.5s;
  -moz-transition: transform 0.5s;
  -ms-transition: transform 0.5s;
  -o-transition: transform 0.5s;
}

@media (max-width: 768px) {
  .yearNavigatorWrapper {
    flex-direction: column;
    align-items: center; /* Center items horizontally */
  }

  .yearNavigator {
    gap: 0.5rem; /* Reduce gap for smaller screens */
    margin-bottom: 1rem; /* Add space below yearNavigator */
  }

  .bigYearLabel {
    font-size: 3rem; /* Reduce font size for smaller screens */
  }
}